<template>
    <div class="question" @click="onEvent">
        <div class="question_inner l-f">
            <div class="question_left">
                <img class="question_left_icon" src="@/assets/icons/icon-list.svg" alt="">
            </div>
            <div class="question_right l-f1">
                <p class="question_right_title">{{title}}</p>
                <p class="question_right_desc">{{desc}}</p>
            </div>
            <img class="question_icon" src="@/assets/icons/icon-right.svg" alt="">
        </div>
    </div>
</template>

<script setup>
defineProps({
    title: {
        type: String,
        default: ''
    },
    desc: {
        type: String,
        default: ''
    },
})

const emits = defineEmits(['onEvent'])

const onEvent = () => {
    emits('onEvent')
}

</script>

<style lang="scss" scoped>
.question {
    margin: 20px auto;
    height: 65px;
    border-width: 1px solid;
    border-radius: 16px;
    background: linear-gradient(to bottom, #ffffff1a, #fff0);
    padding: 1px;
    box-sizing: border-box;
    &_inner {
        width: 100%;
        height: 100%;
        background-color: #070628;
        border-radius: 16px;
        padding: 8px 15px;
        box-sizing: border-box;
    }
    &_left {
        padding-right: 15px;
        box-sizing: border-box;
        border-right: 1px solid #ffffff4d;
        &_icon {
            width: 24px;
            height: 40px;
        }
    }
    &_right {
        margin-left: 15px;
        &_title {
            font-size: 14px;
            font-weight: 500;
        }
        &_desc {
            font-size: 10px;
            color: #ffffff;
            opacity: .5;
        }
    }
}
</style>